<template>
  <div class="demonstrationZone">
    <CesiumCommon />
    <!-- <OverlayPopup :stationData="state.pickFeatures" />
    <WmsDetailsPopup :stationData="state.pickWmsFeature" />-->
    <StationPopup :stationData="stationData" />
    <LeftCommon :isCollapse="state.isCollapse" />
    <RightCommon :isCollapse="state.isCollapse">
      <div class="mapTopOperateWarp">
        <a-tooltip color="#409fff" placement="right">
          <template #title><span>站点搜索</span></template>
          <StationSearch :globalMap="state.globalMap" :mapStationData="mapStationData" />
        </a-tooltip>
      </div>
      <div class="mapOperateWarp">
        <a-tooltip color="#409fff" placement="right">
          <template #title><span>全屏展示</span></template>
          <ul class="collapseWarp">
            <li v-show="state.isCollapse" @click="state.isCollapse = false">
              <img src="@/assets/images/collapse1.png" />
            </li>
            <li v-show="!state.isCollapse" @click="state.isCollapse = true">
              <img src="@/assets/images/collapse2.png" />
            </li>
          </ul>
        </a-tooltip>
        <a-tooltip color="#409fff" placement="right">
          <template #title><span>图例展示</span></template>
          <Legend :data="legendData" @change-legend-data="changeLegendData" />
        </a-tooltip>
      </div>
    </RightCommon>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, provide, reactive, ref, watch } from "vue";
import CesiumCommon from "./cesium-common/index.vue";
import { Legend } from "@/components/Legend";
import LeftCommon from "./left-common/index.vue";
import RightCommon from "./right-common/index.vue";
/*import OverlayPopup from '@/components/OverlayPopup';
import WmsDetailsPopup from '@/components/WmsDetailsPopup';
import StationPopup from '@/components/StationPopup';*/
import StationSearch from "@/components/StationSearch";
import { getAllMonitorData } from "@/api/mapServices/mapData";
import { useStationDataStoreWithOut } from "@/store/modules/stationData";

import {
  ZZIcon,
  DDIcon,
  DPIcon,
  PPIcon,
  RRIcon,
  SSIcon,
  VVIcon,
} from "@/setting/imageEnum";
import StationPopup from "@/components/StationPopup/index.vue";

defineOptions({ name: "DemonstrationZone" });

const stationData = ref(null);
const legendUpdate = ref(null);
const mapStationData = ref(null);
const stationDataStore = useStationDataStoreWithOut();
const state = reactive({
  pickFeatures: null,
  pickWmsFeature: null,
  isCollapse: false,
  isShow3DTiles: true,
  type23D: "2D",
});

const legendData = [
  {
    title: "监测站点",
    data: [
      { icon: DPIcon, name: "泵站站", type: "DP", status: true },
      { icon: DDIcon, name: "涵闸站", type: "HZ", status: true },
      { icon: ZZIcon, name: "水位站", type: "CZ", status: true },
      { icon: PPIcon, name: "雨量站", type: "PP", status: true },
      { icon: RRIcon, name: "水库站", type: "RR", status: true },
      { icon: SSIcon, name: "墒情站", type: "SS", status: true },
      { icon: VVIcon, name: "视频站", type: "VV", status: true },
    ],
  },
  {
    title: "其他",
    data: [
      { icon: null, name: "沟渠", type: "channelline", status: true },
      { icon: null, name: "示范区范围", type: "demonstration_plot", status: true },
      { icon: null, name: "钱仓圩田块", type: "field_blocks", status: true },
      { icon: null, name: "L2级干渠", type: "riverL2", status: true },
      { icon: null, name: "新禹河街道", type: "streetPolygonLayer", status: false },
    ],
  },
];

// 图例点击更新的数据
const changeLegendData = (data) => {
  legendUpdate.value = data;
};
provide("LegendUpdateData", legendUpdate);

// 监听侧边栏表格选择站点，地图点击站点，弹窗展示详情
watch(
  () => stationDataStore.stationData,
  (val) => {
    stationData.value = val;
  }
);

onMounted(async () => {
  const allMonitorData = await getAllMonitorData();
  mapStationData.value = allMonitorData;
});
</script>

<style lang="less" rel="stylesheet/less" scoped>
.demonstrationZone {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;

  .mapTopOperateWarp {
    position: absolute;
    left: -60px;
    top: 40px;
    z-index: 200;
    width: 40px;
    padding-left: 10px;
    display: grid;
    grid-row-gap: 10px;
  }

  .mapOperateWarp {
    position: absolute;
    left: -60px;
    bottom: 30px;
    z-index: 200;
    width: 50px;
    padding-left: 10px;
    display: grid;
    grid-row-gap: 10px;

    .switch2D3D,
    .collapseWarp,
    .viewer360,
    .inspectionVideo,
    .obliquePhotography {
      width: 40px;
      height: 40px;
      background: rgba(50, 120, 160, 0.6);
      box-shadow: 0px 4px 6px 0px #03225917;
      border-radius: 6px;
      // border: 1px solid #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      user-select: none;
      /* &:hover, &:active {
          background: #e6fff3;
          border: 1px solid #b9e9d3;
        } */

      img {
        filter: brightness(100%) saturate(100%) invert(0%);
      }

      &:hover,
      &:active {
        background: rgba(50, 120, 160, 1);

        img {
          filter: brightness(125%) saturate(125%) invert(0%);
        }
      }

      li {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;

        img {
          width: 36px;
        }
      }
    }

    .collapseWarp {
      bottom: 200px;

      li img {
        width: 30px;
      }
    }

    .viewer360,
    .inspectionVideo,
    .obliquePhotography {
      img {
        width: 30px;
      }
    }
  }

  .greyIcon {
    filter: grayscale(100%);
  }
}
</style>
